<template>
  <div class="login-panel">
    <div class="login-box">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
    
        <el-form-item prop="username">
          <el-input
            ref="username"
            v-model.number="loginForm.phone"
            placeholder="请输入手机号"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
            prefix-icon="el-icon-mobile-phone"
            @blur="verifyPhone"
          />
        </el-form-item>

        <el-form-item prop="vercode">
          <el-input
            ref="vercode"
            v-model="loginForm.vercode"
            placeholder="请输入验证码"
            name="vercode"
            type="text"
            tabindex="1"
            auto-complete="on"
            prefix-icon="el-icon-key" 
            style="width: 54%"
          />

          <el-button type="primary" plain 
            :style="`margin-left:10px;padding:12px ${butPadding}px`" 
            @click="getCode" :disabled="codeButText !== '获取验证码'">{{ codeButText }}  
          </el-button>
          
        </el-form-item>
    
        <el-form-item prop="password">
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            
            show-password
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            @keyup.enter.native="handleLogin"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-form-item prop="repass">
          <el-input
            :key="passwordType"
            ref="repass"
            v-model="loginForm.repass"
            
            show-password
            placeholder="请再次输入密码"
            name="repass"
            tabindex="3"
            auto-complete="on"
            @keyup.enter.native="handleLogin"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:0px;" 
            @click="handleLogin()">确 认 注 册</el-button>
        </el-form-item>
        <div class="other">
          <div style="display:inline-block">
            <el-checkbox v-model="isAgrre">
              <span class="other-user-text">已阅读并同意</span><el-link type="primary" style="font-size:10px">《用户使用协议》</el-link>
            </el-checkbox>
          </div>
          <div style="float:right;display:inline-block">
            <el-link type="primary" style="font-size:10px">忘记密码？</el-link>
          </div>
        </div>
      </el-form>
    </div>
    <div class="register-link"><el-link type="info" style="font-size:10px" @click="login">登录<i class="el-icon-arrow-right" /></el-link></div>

    <el-dialog :visible.sync="dialogVerify" width="360px"></el-dialog>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getName, getPassWord } from '@/utils/auth'
import { verifyPhone, getPhoneCode, register } from '@/api/user'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('请输入不少于6个字符的密码'))
      } else {
        callback()
      }
    }
    const validateRepass = (rule, value, callback) => {
      if (value !== this.loginForm.password) {
        callback(new Error('两次输入的密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      dialogVerify: false,
      isAgrre: true,
      loginForm: {
        username: getName(),
        password: getPassWord()
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        vercode:  [{ required: true, trigger: 'blur', message: '请输入验证码' }],
        repass:   [{ required: true, trigger: 'blur', validator: validateRepass }],

      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,

      codeButText: '获取验证码',
      butPadding: 20
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 验证手机号是否被注册
     */
    verifyPhone() {
      verifyPhone({phone: this.loginForm.phone}).then(res => {
        if(res.status === 200) {
          this.$message.warning('改手机号已注册！')
        }
      })
    },
    /**
     * 获取验证码
     */
    getCode() {

      getPhoneCode({phone: this.loginForm.phone,access_token:''}).then(res => {
        if(res.status === 200) {
          let count = 59;
          this.butPadding = 5;
          this.codeButText = count + '秒后重新获取';     
          this.intervalId = setInterval(() => {
            count --;
            if(count > 0) {
              this.codeButText = count + '秒后重新获取';
            }else{
              this.codeButText = '获取验证码';
              this.butPadding = 20;
              clearInterval(this.intervalId);
            }
          },1000)
        }else{
          this.$message.error(res.message);
        }
      })

      
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if(!this.isAgrre){
            this.$message.error('请阅读并勾选同意《用户使用协议》后，方可登录')
            return
          }

          register({
            ...this.loginForm,
            agreement: 'on',
            access_token: ''
          }).then(res => {
            if(res.status === 200) {
              this.$message.success('注册成功！');
              this.$emit('register');
            }else{
              this.$message.error(res.message);
            }
          })
          // this.$emit('Verify',this.loginForm);
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    test() {
      console.log('OK!')
    },
    login(){
      this.$emit('login')
    }
  }
}
</script>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    // padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    // color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      // color: $light_gray;
      margin: 0px auto 25px auto;
      text-align: center;
      font-weight: 600;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>

<style lang="css" scoped>
.login-panel{
  width: 376px;
  height: 440px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto;
  box-shadow: 1px 2px 5px 1px #292929;
  padding: 30px 10px;
}
.login-box{
  padding: 0 40px;
}
.login-title{
  text-align: center;
  font-size: 24px;
}
.other-user{
  font-size: 10px;
}
.other-user-text{
  font-size: 10px;
  color: #545454
}
.register-link{
  position: relative;
  top: -410px;
  left: 310px;
}
</style>